<template>
  <div style="text-align: left">
    <el-dialog
      title="添加 / 修改用户信息"
      :visible.sync="dialogFormVisible"
      @close="clearData"
      width="30%"
      center>
      <el-form :model="confirmForm" :rules="rules" class="confirm-container" label-position="left"
               label-width="80px">
        <h3 class="confirm_title">教师信息</h3>
        <el-form-item prop="name" label="姓名">
          <el-input type="text" v-model="confirmForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-radio-group v-model="confirmForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="lxfs" label="手机">
          <el-input v-model.number="confirmForm.lxfs"></el-input>
        </el-form-item>
        <el-form-item prop="jsbz" label="个人简介">
          <el-input type="textarea"
                    :autosize="{ minRows: 2, maxRows: 5}"
                    placeholder="请输入简介内容(不超过200个字)"
                    v-model="confirmForm.jsbz"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="" v-on:click="confirm">提交
        </el-button>
        <el-button @click="dialogFormVisible = false" style="">取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PersonEdit',
  data () {
    return {
      dialogFormVisible: false,
      confirmForm: {
        id: '',
        name: '',
        sex: '',
        jsbz: '',
        lxfs: ''
      },
      rules: {}
    }
  },
  methods: {
    confirm () {
      this.$axios.post('/teacher/user/editInfo', {
        id: this.confirmForm.id,
        name: this.confirmForm.name,
        sex: this.confirmForm.sex,
        jsbz: this.confirmForm.jsbz,
        lxfs: this.confirmForm.lxfs
      }).then(resp => {
        this.dialogFormVisible = false
      }).catch(failResponse => {
        alert('服务器响应请求失败！')
      })
    },
    clearData () {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped>
.confirm-container {
  background-clip: padding-box;
  margin: 5px 5px;
  width: 350px;
  padding: 15px 15px 15px 15px;
  background: #fff;
}

.confirm_title {
  margin: 0px auto 18px;
  text-align: center;
  color: #9495c5;
}
</style>
